<template>
  <div v-if="randCurrentList">
    <h4 style="margin-bottom: 15px">
      {{ currentPage + 1 }}# {{ randCurrentList.title }}
      <i class="el-icon-question" @click="drawer = true"></i>
    </h4>
    <el-checkbox-group v-model="checkList">
      <div v-for="(item, index) in randCurrentList.options" :key="index">
        <el-checkbox :label="item.index">{{ item.value }}</el-checkbox>
      </div>
    </el-checkbox-group>
    <el-button-group>
      <el-button
        type="success"
        size="mini"
        icon="el-icon-arrow-left"
        @click="prev"
        :disabled="currentPage == 0"
        >上一题</el-button
      >
      <el-button
        type="success"
        size="mini"
        @click="next"
        :disabled="currentPage == pageSize - 1"
        >下一题<i class="el-icon-arrow-right el-icon--right"></i
      ></el-button>
      <el-button
        type="warning"
        size="mini"
        v-if="currentPage == pageSize - 1"
        @click="doPaper"
        >交卷</el-button
      >
    </el-button-group>
    <el-drawer title="提示" :visible.sync="drawer">
      {{ randCurrentList.tips }}
    </el-drawer>
  </div>
</template>

<script>
import myMethods from "../utils/myMethod/index";
import { mapActions, mapState, mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      checkList: [],
      drawer: false,
      interver: null,
      time: 0,
    };
  },
  async mounted() {
    await this.getRondList();
    this.timeStart();
  },
  watch: {
    currentPage(newVal) {
      if (this.checkedList[newVal]) {
        this.checkList = this.checkedList[newVal].split("");
      } else {
        this.checkList = [];
      }
    },
  },
  methods: {
    ...mapActions("test", ["getRondList"]),
    ...mapMutations("test", ["SET_CURRENTPAGE", "SET_CHECKLIST","TIME_STOP"]),
    timeStart() {
      this.interver = setInterval(() => {
        this.time++;
      }, 1000);
    },
    doPaper() {
      clearInterval(this.interver);
      this.TIME_STOP()
      let sec = Math.floor(this.time / 60);
      let min = this.time % 60;
      let score = myMethods.getScore(this.checkedList, this.randList);
      this.$parent.timeOver(
        myMethods.fillZero(sec) + ":" + myMethods.fillZero(min),
        score
      );
    },
    prev() {
      this.SET_CURRENTPAGE(this.currentPage - 1);
      this.checkList = this.checkedList[this.currentPage].split("");
    },
    async next() {
      await this.SET_CHECKLIST(this.checkList.sort().join(""));
      this.SET_CURRENTPAGE(this.currentPage + 1);
      this.checkList =
        (this.checkedList[this.currentPage] &&
          this.checkedList[this.currentPage].split("")) ||
        [];
    },
  },
  computed: {
    ...mapState("test", ["randList", "currentPage", "pageSize", "checkedList"]),
    ...mapGetters("test", ["randCurrentList"]),
  },
};
</script>

<style scoped>
.el-checkbox-group > div {
  margin-bottom: 15px;
}

.el-icon-question {
  cursor: pointer;
}

/deep/.el-drawer__body {
  padding: 20px;
}
</style>